<template>
	<view class="page">
		<!-- 顶部订单状态 -->
		<view class="order-status-box">
			<view class="status-text">{{ paymentStatusText }}</view>
			<view class="status-sub">订单号：{{ orderDetail.orderNo || '-' }}</view>
		</view>

		<!-- 商品信息 -->
		<view class="card product-card">
			<view class="card-title">商品信息</view>
			<view class="product-content">
				<image class="product-image" :src="orderDetail.imageUrl" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-name">{{ orderDetail.name }}</view>
					<view class="product-row">
						<text class="product-price">¥ {{ orderDetail.totalAmount }}</text>
						<text class="product-qty">x{{ orderDetail.quantity }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="card">
			<view class="card-title">收货信息</view>

			<view class="row">
				<text class="label">收货人：</text>
				<text class="value">{{ orderDetail.receiverName }}</text>
			</view>

			<view class="row">
				<text class="label">手机号：</text>
				<text class="value">{{ orderDetail.receiverPhone }}</text>
			</view>

			<view class="row">
				<text class="label">收货地址：</text>
				<text class="value">{{ fullAddress }}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="card">
			<view class="card-title">订单信息</view>

			<view class="row">
				<text class="label">订单 ID：</text>
				<text class="value">{{ orderDetail.id }}</text>
			</view>

			<view class="row">
				<text class="label">订单号：</text>
				<text class="value">{{ orderDetail.orderNo }}</text>
			</view>

			<view class="row">
				<text class="label">支付方式：</text>
				<text class="value">{{ paymentMethodText }}</text>
			</view>

			<view class="row">
				<text class="label">支付状态：</text>
				<text class="value">{{ paymentStatusText }}</text>
			</view>

			<view class="row">
				<text class="label">支付时间：</text>
				<text class="value">{{ orderDetail.paymentTime || '—' }}</text>
			</view>

			<view class="row">
				<text class="label">物流单号：</text>
				<text class="value">{{ orderDetail.trackingNumber || '暂无' }}</text>
			</view>

			<view class="row total-row">
				<text class="label">实付金额：</text>
				<text class="total-amount">¥ {{ orderDetail.totalAmount }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {}
			}
		},
		computed: {
			fullAddress() {
				const d = this.orderDetail || {}
				if (!d.province && !d.city && !d.district && !d.detailAddress) return '—'
				return `${d.province || ''}${d.city || ''}${d.district || ''}${d.detailAddress || ''}`
			},
			// 支付方式文案（按你们后端约定自己调）
			paymentMethodText() {
				const map = {
					1: '微信支付',
					2: '支付宝',
					3: '银行卡',
					4: '余额支付'
				}
				return map[this.orderDetail.paymentMethod] || '其他方式'
			},
			// 支付状态文案（按你们的状态码改）
			paymentStatusText() {
				const map = {
					0: '待支付',
					1: '已支付',
					2: '已退款',
					3: '支付失败',
					4: '支付超时',
				}
				return map[this.orderDetail.paymentStatus] || '未知状态'
			}
		},
		onLoad() {
			// 假设本地缓存里是字符串，需要 JSON.parse
			const orderDetail = uni.getStorageSync('orderDetail')
			if (orderDetail) {
				try {
					this.orderDetail = typeof orderDetail === 'string' ? JSON.parse(orderDetail) : orderDetail
				} catch (e) {
					console.error('orderDetail 解析失败', e)
				}
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f6f6f6;
		min-height: 100vh;
	}

	/* 顶部状态 */
	.order-status-box {
		background-color: #ffffff;
		padding: 40rpx 30rpx 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.status-text {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 10rpx;
	}

	.status-sub {
		font-size: 24rpx;
		color: #888;
	}

	/* card 通用样式 */
	.card {
		background: #fff;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	/* 行样式 */
	.row {
		display: flex;
		padding: 14rpx 0;
	}

	.label {
		color: #666;
		width: 180rpx;
		font-size: 26rpx;
	}

	.value {
		color: #333;
		font-size: 26rpx;
		flex: 1;
	}

	/* 商品信息 */
	.product-card {
		margin-top: 20rpx;
	}

	.product-content {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		background-color: #f2f2f2;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 160rpx;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
	}

	.product-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.product-price {
		font-size: 30rpx;
		font-weight: 600;
	}

	.product-qty {
		font-size: 26rpx;
		color: #666;
	}

	/* 合计金额行特殊样式 */
	.total-row {
		border-top-width: 1rpx;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		margin-top: 10rpx;
		padding-top: 20rpx;
	}

	.total-amount {
		color: #ff4d4f;
		font-size: 32rpx;
		font-weight: 700;
	}
</style>